"use client";
import React, { useState } from 'react';
import { GoSidebarCollapse } from "react-icons/go";
import { GoSidebarExpand } from "react-icons/go";
import { FaHtml5 } from "react-icons/fa";
import Link from 'next/link';

const Sidebar = () => {
    const [isShowSidebar, setIsShowSidebar] = useState(false);

    return (
        <div className='flex flex-col items-center m-2 font-douyin'>

            <label htmlFor="sidebar" className='has-checked:hidden md:hidden mb-2 text- hover:text-gray-500 hover:scale-110 hover:cursor-pointer' >
                {isShowSidebar ?
                    <div className='flex justify-center w-[150px]' >
                        <GoSidebarExpand className='text-2xl' />
                        关闭抽屉
                    </div>
                    :
                    <div >
                        <GoSidebarCollapse className='text-2xl' />
                    </div>
                }
            </label>



            <div className='hidden has-checked:block md:block bg-accent shadow-lg rounded-2xl text-accent-content'>
                <ul className='flex items-center w-[150px] h-full menu'>
                    <li><Link href="/technologyStack/">关于</Link></li>
                    <li className='flex items-center'>
                        <Link href="/technologyStack/html">
                            <FaHtml5 />
                            html
                        </Link>
                    </li>
                    <li>
                        <details open>
                            <summary>Parent</summary>
                            <ul>
                                <li>Child</li>
                            </ul>
                        </details>
                    </li>

                </ul>
                <input type="checkbox" className='hidden' name="" id="sidebar" onChange={() => setIsShowSidebar(!isShowSidebar)} />
            </div>
        </div >
    );
};

export default Sidebar;
